<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Various Animation</title>
    <script src="../Vue.js" type="text/javascript"></script>
    <style>
        .fade-enter-active, .fade-leave-active {
            transition: opacity 2s;
        }
        .fade-enter, .fade-leave-to {
            opacity: 0;
        }
    </style>
</head>
<body>

    <div id="app">

        <!---->
        <transition name="fade">
            <div v-if="isShow">{{username}}</div>
        </transition>

        <button @click="Toggle">点一下</button>
    </div>

    <script>
        let app = new Vue({
            el:"#app",
            data:{
            	username:"张三",
                isShow:true
            },
            methods:{
            	Toggle:function () {
                    this.isShow = !this.isShow
	            }
            }
        })
    </script>
</body>
</html>